<template>
  <div id="register">
    <div class="main">
      <el-form :label-position="labelPosition" label-width="80px" :model="ruleForm" :rules="rules" ref="ruleForm">
        <div class="title">
          注册
        </div>
        <el-form-item label="" prop="account" label-width="0">
        <el-input v-model.number="ruleForm.account" placeholder="请输入账号"></el-input>
      </el-form-item>
        <el-form-item label="" prop="tel" label-width="0">
          <el-input v-model.number="ruleForm.tel" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="" prop="pass" label-width="0">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="" prop="checkPass" label-width="0">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="请输入确认密码"></el-input>
        </el-form-item>

        <el-button type="primary" size="small" style="width: 100%;margin: 10px 0" @click="registerBtn">点击注册</el-button>
        <div class="link">
          <el-link href="http://localhost:5000/#/forget" target="_self" ><div class="color-red">忘记密码?</div></el-link>
          <el-divider direction="vertical" class="height-per-100"></el-divider>
          <el-link href="http://localhost:5000/#/login" target="_self">登录页面</el-link>
        </div>

      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Register',
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      labelPosition: 'left', // 设置标签位置
      ruleForm: {
        account: '',
        pass: '',
        checkPass: '',
        tel: ''
      },
      rules: {
        account: [
          {required: true, message: '请输入账号', trigger: 'blur'}
        ],
        pass: [
          {required: true, validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {required: true, validator: validatePass2, trigger: 'blur'}
        ],
        tel: [
          {required: true, message: '请输入联系电话', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    // 提交按钮
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 重置按钮
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 注册按钮
    registerBtn () {
      // 对输入的数据进行条件判断
      if (this.ruleForm.account == null || this.ruleForm.account === '') {
        this.$message.error('账号不能为空')
        return ''
      }
      if (this.ruleForm.pass == null || this.ruleForm.pass === '') {
        this.$message.error('密码不能为空')
        return ''
      }
      if (this.ruleForm.checkPass == null || this.ruleForm.checkPass === '') {
        this.$message.error('确认密码不能为空')
        return ''
      }
      if (this.ruleForm.checkPass !== this.ruleForm.pass) {
        this.$message.error('前后密码不一致')
        return ''
      }
      if (this.ruleForm.tel == null || this.ruleForm.tel === '') {
        this.$message.error('联系电话不能为空')
        return ''
      }
      console.log(this.ruleForm)
      // 施行注册的主要方法
      this.$axios.get(
        '/user/register',
        {params: {
          'name': this.ruleForm.account,
          'pwd': this.ruleForm.pass,
          'tel': this.ruleForm.tel
        }}).then(response => {
        console.log(response)
        this.$message.success(response.data)
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>
<style scoped>
  #register {
    width: 100%;
    height: 100%;
    position: relative;
    background: url("~@/assets/img/temp/19.jpg");
    background-size: 100% 100%;
  }

  .main {
    padding: 30px 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%, -50%);
    width: 20%;
    /*height: 40%;*/
    background: white;
    border-radius: 4px;
  }

  .el-form-item {
    margin-bottom: 18px !important;
  }

  element.style {
    margin-left: 0px !important;
  }

  .link {
    display: flex;
    justify-content: flex-end;
    height: 25px;
  }

  .title {
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 20px;
  }
</style>
